<template>
    <div class="wc-winrank" v-if="dList.length > 0">
        <div class="wr-title" @click="navTo">夺冠预测榜</div>
        <!-- <div class="wr-desc">德国在355场预测中多得了300场冠军</div> -->
        <div class="wr-list">
            <div class="wr-item" v-for="(item,index) in dList" :key="index">
                <!-- <div class="icon"></div> -->
                <div class="order">No.{{index+1}}</div>
                <div class="country">{{item.name}}</div>
                <div class="flag">预测中共获得{{item.supportNum}}次</div>
            </div>
        </div>
    </div>
</template>
<script>
import axios from 'axios';
export default {
    created () {
        this.fetch();
    },
    data () {
        return {
            dList: []
        }
    },
    methods: {
        fetch () {
            axios.get('/api/java/country/list/limit/5').then((res) => {
                this.dList = res.data.data;
            })
        },
        navTo () {
            this.$router.push({
                path: '/index1'
            });
        }
    }
}
</script>
<style lang="less" scoped>
    @import '~assets/less/variable.less';
    .wr-title {
        text-align: center;
        font-size: 15px;
    }
    .wr-desc {
        margin-top: 8px;
        font-size: 13px;
        text-align: center;
        color: #AEB6C0;
    }
    .wr-item {
        width: 290px;
        margin: 0 auto;
        margin-top: 20px;
    }
    .icon {
        display: inline-block;
        width: 30px;
        height: 30px;
        background-color: #AEB6C0;
        vertical-align: middle;
    }
    .order {
        display: inline-block;
        width: 40px;
        margin-left: 10px;
        line-height: 30px;
        vertical-align: middle;
    }
    .country {
        display: inline-block;
        width: 70px;
        margin-left: 10px;
        line-height: 30px;
        vertical-align: middle;
        text-align: center;
    }
    .flag {
        display: inline-block;
        width: 140px;
        height: 30px;
        margin-left: 10px;
        // background-color: #AEB6C0;
        vertical-align: middle;
        line-height: 30px;
    }
</style>

